import React from "react";
import { Map, List, fromJS } from "immutable";
// 希望在修改数据的同时，要尽可能地不要去增加内存的消耗
// immutable就是用来解决这个问题

const App = () => {
  // immutable叫做不可变数据：一旦immutable的数据创建以后，就再也不能被修改了
  // 对这个数据的任一的修改，都只会返回一个新的数据

  // immutable还有一个特点是结构共享，当数据发生改变的时候，只有变了的部分会增加内存，不变的内容保持内存的共享。减少内存的增加

  // 用immutable创建对象,需要使用Map
  const obj = Map({
    a: 3,
    b: 4,
  });
  // 如果需要获取里面属性的值，要用get方法
  console.log(obj.get("a"));
  console.log(obj.get("b"));
  // toJS方法是将immutable对象转成普通的js对象,项目不要用，仅仅用来做调试
  console.log(obj.toJS());

  // 如果需要去修改immutable对象，要用set方法
  const obj2 = obj.set("a", 30);
  console.log(obj2.toJS());

  // 如果需要在原有数据的基础上做修改，可以只用update的方法
  const obj3 = obj.update("a", (v) => v * 2);
  console.log(obj3.toJS());

  // 还可以用List来创建数组
  const arr = List([1, 2, 3, 4]);
  console.log(arr);

  const obj4 = Map({
    a: 3,
    b: 4,
    c: {
      x: 10,
      y: 20,
    },
  });
  console.log(obj4);

  // Map只创建第一层对象，fromJS相当于是递归的创建Map对象
  const obj5 = fromJS({
    a: 3,
    b: 4,
    c: {
      x: 10,
      y: 20,
    },
  });
  console.log(obj5);

  // 可以使用getIn方法来获取深层的map的值
  console.log(obj5.getIn(["c", "x"]));

  // 可以使用getIn方法来修改深层的map的值
  const obj6 = obj5.setIn(["c", "x"], 100);
  console.log(obj6);

  const obj7 = obj5.updateIn(["c", "x"], (v) => v + 1);
  console.log(obj7.toJS());

  return (
    <>
      <h2>immutable</h2>
    </>
  );
};

export default App;
